<template>
    <div>
        <button @click="open">打开1</button>
        <button @click="open1">打开2</button>
        <button @click="openM('success')">弹窗弹框 success</button>
        <button @click="openM('warning')">弹窗弹框 warning</button>
        <button @click="openM('error')">弹窗弹框 error</button>
        <button @click="openM('info')">弹窗弹框 info</button>
        <button @click="openM('')">默认 info</button>
        <br>
        <button @click="openM_M('success')">弹窗弹框 success</button>
        <button @click="openM_M('warning')">弹窗弹框 warning</button>
        <button @click="openM_M('error')">弹窗弹框 error</button>
        <button @click="openM_M('info')">弹窗弹框 info</button>
        <button @click="openM_M('')">默认 info</button>
        <br>
        <button @click="getLoading">loading</button>
        <button @click="upload">上传文件</button>
        <br>
        <div v-for="(item,index) in Image.list" :key="'imglist'+index"
            style="display:inline-block;position: relative;">
            <img style="width:500px;height:500px;object-fit:cover;display:inline-block"
                :src="baseURL+item.filepath" alt="" @click="updateImg(item)">
            <button @click="deleteImg(item)" style="position: absolute;top:0;left:0">删除</button>
        </div>
    </div>
</template>

<script setup>
/**
 * @Author dingxing [2022-08-24 17:49:09]
 * @Description  使用layx
 */
import { getCurrentInstance, onMounted, reactive } from 'vue'
// 导入
import { Message, Loading, Upload } from '../js/index'
const { proxy } = getCurrentInstance();

const { Layx, $http, $msg, $loading, $upload } = proxy;

let Image = reactive({
    list: []
})

let condition = process.env.NODE_ENV;
let baseURL = condition == 'production' ? "" : '/api';
const upload = () => {
    $upload({
        url: baseURL + "/upload",
        multiple: true,
        accept: "image/*", //原生 input属性
        headers: {
            token: "123456",
            author: "ding xing"
        },
        onSuccess(res) {
            console.log('成功', res);
            let { data, code } = res || {};
            if (code != 1) {
                Message({
                    type: "error",
                    message: "上传失败"
                })
                return
            }
            Image.list = [].concat(Image.list, data)
            Message({
                type: "success",
                message: "上传成功"
            })
        },
        onError(data) {
            Message({
                type: "error",
                message: "上传失败"
            })
        }
    })
    /*  Upload({
         url: baseURL + "/upload",
         multiple: true,
         accept: "image/*", //原生 input属性
         headers: {
             token: "123456",
             author: "ding xing"
         },
         onSuccess(res) {
             console.log('成功', res);
             let { data, code } = res || {};
             if (code != 1) {
                 Message({
                     type: "error",
                     message: "上传失败"
                 })
                 return
             }
             Image.list = [].concat(Image.list, data)
             Message({
                 type: "success",
                 message: "上传成功"
             })
         },
         onError(data) {
             Message({
                 type: "error",
                 message: "上传失败"
             })
         }
     }) */
};

onMounted(() => {
    let loading = $loading.service({})
    $http.get('/upload/getList').then((res) => {
        loading.close();
        $msg.success("获取成功")
        const { data } = res.data || {}
        console.log(data);
        Image.list = data || []
    })
});

// 更新图片
const updateImg = (item) => {
    Upload({
        url: baseURL + "/upload/update?id=" + item.id,
        data: {
            id: item.id
        },
        multiple: false,
        accept: "image/*", //原生 input属性
        headers: {
            token: "123456",
            author: "ding xing"
        },
        onSuccess(res) {
            let { data, code } = res || {}
            if (code == 0) {
                Message({
                    type: "error",
                    message: "更新失败"
                })
                return
            }

            Image.list.some((item) => {
                if (item.id == data[0].id) {
                    Object.assign(item, data[0])
                    return true
                }
            })

            Message({
                type: "success",
                message: "更新成功"
            })
        },
        onError(data) {
            Message({
                type: "error",
                message: "更新失败"
            })
        }
    })
};

// 删除图片
const deleteImg = (item) => {
    let is = confirm("是否删除当前图片");
    if (!is) return
    $http.delete('/upload/delete', { id: item.id }).then((res) => {
        const { data } = res.data || {}
        Image.list.some((item, index) => {
            if (item.id == data.id) {
                Image.list.splice(index, 1)
                return true
            }
        })
        Message({
            type: "success",
            message: "删除成功"
        })
    }).catch((err) => {
        Message({
            type: "error",
            message: "删除失败"
        })
    })
};

const getLoading = () => {
    let ld = Loading.service({
        text: "获取数据中...",

    })
    $http.get('/getTestLoading').then(() => {
        Message({
            type: "success",
            message: "获取成功",
            // 关闭事件
            closed() {
                {
                    console.log('关闭事件')
                }
            }
        })
        ld.close();
    })

};


const openM = (type) => {
    switch (type) {
        case 'success':
            Message(
                {
                    type: "success",
                    duration: 3000,
                    message: "开幕式暨高峰会继续紧扣“智能化：为经济赋能，为生活添彩”主题，聚焦智慧城市年度主题，由重庆市人民",
                    // showClose: false,
                }
            );
            break;
        case 'warning':
            Message(
                {
                    type: "warning",
                    duration: 3000,
                    message: "警告",
                    // showClose: false,
                }
            );
            break;
        case 'error':
            Message(
                {
                    type: "error",
                    duration: 3000,
                    message: "错误",
                    // showClose: false,
                }
            );
            break;

        case "info":
            Message(
                {
                    type: "info",
                    duration: 3000,
                    message: "信息提示"
                }
            );
            break;

        default:
            Message({
                message: "默认"
            })
    }



};
const openM_M = (type) => {
    switch (type) {
        case 'success':
            Message.success("成功");
            Message.success({ message: "成功", type: "warning", duration: 5000, showClose: true, closed() { console.log("关闭") } });
            break;
        case 'warning':
            Message.warning("警告");
            Message.warning({ message: "警告", type: "warning", duration: 5000 });
            break;
        case 'error':
            Message.error("失败");
            Message.error({ message: "失败", type: "warning", duration: 0, showClose: true });
            break;
        case "info":
            Message.info("info");
            Message.info({ message: "info", type: "warning", duration: 5000, showClose: true });
            break;
        default:
            Message.info("info");
            Message.info({ message: "info", type: "warning", duration: 5000, showClose: true });
    }

};


const open = () => {
    Layx.open({
        id: "hello-world3",
        content: {
            type: 'html',
            // value: document.getElementById('box')
            value: '123'
        },
        parclose: true,
        toolBar: {
            titleBar: {
                title: "Layx - Create3."
            }
        },
        offset: "rightBottom"
    })

};
const open1 = () => {
    Layx.open({
        id: "hello-world4",
        content: {
            type: 'html',
            // value: document.getElementById('box')
            value: '123'
        },
        parclose: true,
        toolBar: {
            titleBar: {
                title: "Layx - Create4."
            }
        },
        offset: "rightBottom"
    })

};
</script>

<style lang="less" scoped>
button {
    margin: 5px;
    padding: 5px;
    border: solid 1px rgb(84, 230, 166);
    background: rgb(83, 230, 205);
    cursor: pointer;
    font-size: 12px;
}
</style>